<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>砸蛋</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>   
    <div id="app" class="findPage" style="height: 100%;">
        <div id="smash">
            <!--底部层-->
            <div class="first-layer"></div>
            <!--砸蛋页面-->
            <div class="smash-egg-activity" v-show="!isShowPool">
                <div class="delete-icon right" @click="closePageFun"></div>
                <!--选择每次金额   -->
                <div class="change-money">
                    <div class="egg-list" v-for="(item,index) in eggsList" @click="changeEgg(item.id,item.price,item.cover)">
                        <div class="box">
                            <img :src="item.cover" alt="">
                            <div class="num-time" :class="{'num-time-on' : item.id == eggid}">
                                <span v-text="item.price"></span>
                                <span class="dima-icon" v-if="item.currency_id == 2">/次</span>
                                <span v-if="item.currency_id != 2">/次</span>
                            </div>
                            <div v-show="item.id == eggid" class="icon absolute"></div>
                        </div>
                    </div>
                </div>
                <!--彩蛋-->
                <div class="click-eggs">
                    <!--合蛋-->
                    <img class="big-eggs" :src="eggImg" alt="">
                    <!--中奖图片 -->
                    <img v-if="isEggopen == '1'" class="big-eggs-open" :src="eggImgopen" alt="">
                    <!--不中奖图片-->
                    <img v-if="isEggopen == '2'" class="big-eggs-openno" :src="eggImgopenNo" alt="">
                    <!--锤子-->
                    <div class="hammer absolute">
                        <img src="../../image/img06.png" alt="">
                    </div>
                    <!--发光的-->
                    <img v-if="false" class="shine" src="../../image/img12.png" alt="">
                </div>
                <!--砸蛋赢大奖-->
                <div class="win-award">
                    <div style="text-align: center;"><img class="title-big" src="../../image/img16.png" alt=""></div>
                    <p class="win-num">
                        <span v-text="'剩余'+diamonds"></span><span class="dima-icon" style="color: transparent;">12</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span v-text="eggMoney">200</span><span class="dima-icon">/次</span>
                    </p>
                    <div class="click-btn">
                        <div class="btn click-one" @click="hammerEgg(1)">砸蛋</div>
                        <div class="btn click-auto" :class="{'btne': isAuto}" @click="hammerEggAuto" v-text="autoText">自动砸蛋</div>
                    </div>
                    <p class="public-inform">
                        <span class="smash-icon" :class="{' smash-icon-no':!isPublic}" @click="getPublic"></span>
                        <span>抽中奖品公开通知</span>
                        <span class="look-jackpot" @click="showPool()">查看奖池</span>
                    </p>
                    <!--获得奖品-->
                    <div class="get-prize" v-if="prizeList.length > 0">
                        <div style="text-align: center;margin-top: .24rem;">
                            <img class="title-prize" src="../../image/img13.png" alt="">
                        </div>
                        <div class="prize-list">
                            <div class="list" v-for = "(item,index) in prizeList">
                                <img :src="item.cover" alt="">
                                <p class="text moreDot" v-text="item.title">红包</p>
                                <span class="num" v-text="'×'+item.num">×1</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--查看奖池 要用v-show,防止ios调用的无定义函数报错 <-奖品列表  <-单个礼物-->
            <div class="look-pool-box" v-show="isShowPool">
                <div class="look-p-title">
                    <span class="back-btn" @click="closePool()"></span>
                    <img src="../../image/img02.png" alt="">
                </div>
                
                <div class="look-prize-list">
                    
                    <div class="l-list" v-for="(item,index) in poolList">
                        <div class="prize-img">
                            <img :src="item.cover" alt="">
                        </div>
                        <div class="prize-text">
                            <h3>获得概率:<span class="" v-text="item.show_chance">21%</span></h3>
                            <p class="prize-t-t moreDot">
                                <span class="prize-name" v-text="item.title">钱包</span>
                                <span>价值:{{ item.price_value }}</span>
                                <span class="dima-icon" v-if="item.type == 'diamond'"></span>
                                <span v-if="item.type == 'money'">元</span>
                            </p>
                        </div>
                        <div class="look-drawed">
                            <p style="color: #6C60F6;">已抽出</p>
                            <h3 v-text="item.total_num">81</h3>
                        </div>
                    </div>
                </div>
            </div>
            <!--余额不足弹框-->
            <div v-show="goPay">
                <div class="affirm-pay">
                    <p>余额不足，请前往充值</p>
                    <div class="btn-box">
                        <div class="btn btn1" @click="colseToPay">返回</div>
                        <div class="btn btn2" @click="noMoney">确定</div>
                    </div>
                </div>
                <div class="trans-layer"></div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
apiready = function() {

    var vm = new Vue ({
      el: '#app',
      data:{
          goPay:false, //前往充值
          errorinfo:'',
          isShowPool:false,
          isPublic: true,  //是否公开
          eggsList:[],  //蛋分类
          prizeList:[],
          poolList:[],
          diamonds:'',
          type:'', //ios还是安卓
          activeId: '', //this.$route.query.id   //2 , //活动ID
          eggMoney:'' ,//选中的钱
          eggImg:'' , //选中的图片
          eggid:'',  //默认选中第一个
          eggImgopen:'../../image/openimg2.png',
          eggImgopenNo:'../../image/openimg3.png',
          isEggopen:'false',
          isAuto:false,
          token:'',
          autoText : '自动砸蛋',
          setTime:'' //存放定时器
      }, 
      //已成功挂载，相当ready()
      mounted:function(){

            var _this = this;
            this.activeId = getQueryString('activeId');              
            this.goPay = false;
            this.errorinfo = '';
            this.isShowPool = false;
            this.isPublic = true;
            this.eggImgopen = '../../image/openimg2.png';
            this.eggImgopenNo = '../../image/openimg3.png';
            this.isEggopen = 'false';
            this.isAuto = false;
            //clearInterval(this.setTime);
            //进来就获取价格
            this.getpriceList();
            this.getMyprizeL();
                                        
      },
      components:{},
      //相关操作事件
      methods:{
          //下单余额不足去充值
          noMoney:function(){
              var _this = this;
              api.accessNative({
                  name: 'recharge'
              }, function(ret, err) {
                  //拿到回调之后查询余额
                  if (ret) {
                      _this.getResiduemonet();
                  } else {
                      alert(JSON.stringify(err));
                  }
              });
          },          
          //app关闭页面
          closePageFun:function(){
              var _this = this;
              api.accessNative({
                  name: 'close'
              }, function(ret, err) {
                  //拿到回调之后查询余额
                  if (err) {
                      alert(JSON.stringify(err));
                  }
              });
          },
          //获取剩余钻石
          getResiduemonet:function(){
              var _this = this;
              ajaxRequest({
                  method:'get',
                  url:'/api/user/getuserinfo',
                  callback:function(res){
                      _this.diamonds = res.data.diamonds;
                  }
              });

          },
          colseToPay:function(){
              this.goPay = false;
          },
          //查看奖池
          showPool:function(){
              this.getPoolinfo(this.activeId,this.eggid);
          },
          //关闭奖池
          closePool:function(){
               this.isShowPool = false;
          },
          getPublic:function(){
              this.isPublic = !this.isPublic;
          },
          changeEgg:function(id,money,img){
              this.eggid = id;
              this.eggMoney = money;
              this.eggImg = img;

              if(this.isEggopen != 'false'){
                  this.isEggopen = 'false';
              }
              if(this.isAuto){
                   this.autoText = '自动砸蛋';
                  clearInterval(this.setTime);
                  this.isAuto = false;
              }
          },
          // 砸一次
          hammerEgg:function(type){
              var _this = this;
              var ham = $api.dom('.hammer');
              //砸蛋一次时候用如果还在自动砸蛋,停止砸蛋
              if(type == 1 && this.isAuto){
                  this.autoText = '自动砸蛋';
                  clearInterval(this.setTime);
                  this.isAuto = false;
                  return                       
              }
              //砸的过程中
              if($api.hasCls(ham, 'hammerM') || this.isEggopen != 'false'){
                  return
              }else{                       
                  this.getSmashEgg();
              }
          },
          //多次砸蛋
          hammerEggAuto:function(){
              var _this = this;
              if(this.isAuto){
                  this.autoText = '自动砸蛋';
                  clearInterval(this.setTime);
                  this.isAuto = false;
                  //return
              }else{                       
                  _this.isAuto = true;
                  _this.autoText = '停止砸蛋';
                  //点的时候就砸
                  this.hammerEgg(2);
                  //每两秒又砸
                  this.setTime = setInterval(function(){
                      _this.hammerEgg(2);
                  },1700);
              }
                               
          },
          //砸蛋动画
          smashMove:function(res){
              var _this = this;

              var ham = $api.dom('.hammer');
              $api.addCls(ham, 'hammerM');

              setTimeout(function(){
                   $api.removeCls(ham, 'hammerM');

                  _this.isEggopen = 'false';
                  //中奖
                  if(res.length != 0){
                      _this.prizeList.unshift(res);
                  }
              },1600);

              setTimeout(function(){
                  //中奖
                  if(res.length != 0){                            
                      _this.isEggopen = '1';
                  }else{
                      //没中奖
                      _this.isEggopen = '2';
                  }
              },300);
              
          },
          //砸奖接口
          getSmashEgg:function(type){

              var _this = this;
              var isPush = 1;

              if(this.isPublic){
                  isPush = 1;
              }else{
                  isPush = 0;
              }
              
              ajaxRequest({
                  isShowprog:false,
                  method:'POST',
                  url:'/api/luck/draw',
                  data:{
                      activityId: _this.activeId,
                      drawId:_this.eggid,
                      money:_this.eggMoney,
                      is_push: isPush 
                  },
                  callback:function(res){

                      //成功过后重新查钱
                      _this.getResiduemonet();
                      _this.smashMove(res.data,type);   
                  },
                  errcallback:function(err){

                      if(_this.isAuto){
                          _this.autoText = '自动砸蛋';
                          clearInterval(_this.setTime);
                          _this.isAuto = false;
                          //return
                      }
                      //余额不足
                      if(err.info == '余额不足'){
                          _this.goPay = true;
                      }
                      //当前价格有变化
                      if(err.info == '当前价格有变化'){
                          _this.getpriceList();
                      }
                  }
              })             
          },
          //奖池列表
          getPoolinfo:function(activeId,eggId){
              var _this = this;

              ajaxRequest({
                  method:'GET',
                  url:'api/draw/info?activityId='+activeId+'&drawId='+eggId,
                  callback:function(res){
                      _this.isShowPool = true;
                      _this.poolList = res.data;                  
                  }
              });
                 
          },
          //获取每个价格
          getpriceList:function(){
              var _this = this;
              ajaxRequest({
                  method:'GET',
                  url:'api/prize/info?activityId='+this.activeId,
                  callback:function(res){
                      _this.eggsList = res.data;
                      _this.eggid = res.data[0].id;
                      _this.eggImg = res.data[0].cover;
                      _this.eggMoney = res.data[0].price;                  
                  }
              })
          }, 
         //获取自己获奖记录
          getMyprizeL:function(){
              var _this = this;
              ajaxRequest({
                  method:'GET',
                  url:'api/prize/list?activityId='+this.activeId, 
                  callback:function(res){
                      
                      _this.prizeList = res.data;
                      //执行价格
                      _this.getpriceList();
                      _this.getResiduemonet();
                  }              
              });

          },
        }
    });
}

</script>

</html>
